<template>
    <div class="box">
        <div style="height: 40px; text-align: center" class="action">
            <el-button class="btn" type="text" @click="addCat">添加分类</el-button>
            <el-button class="btn" type="text" v-if="current" @click="renameCat">重命名</el-button>
            <el-popconfirm
                    class="btn"
                    title="确认删除？"
                    @onConfirm="rmCat"
                    v-if="current"
            >
                <el-button slot="reference" type="text"  >删除</el-button>
            </el-popconfirm>
            <el-button class="btn" type="text" @click="addBpm">新建表单</el-button>
            <el-upload
                    style="display: inline-block"
                    class="btn"
                    ref="upload"
                    :action="`${url}/form/load`"
                    :auto-upload="true"
                    :show-file-list="false"
                    :headers="getHeaders()"
                    :on-success="imt"
                    :data="{type: 'form'}"
                    :before-upload="beforeImt"
            >
                <el-button slot="trigger" type="text" >导入</el-button>
            </el-upload>
            <el-button class="btn" type="text" @click="exp">导出</el-button>
        </div>
        <el-tabs v-model="current" tab-position="left"  >
            <el-tab-pane v-for="(v,i) in cats" :name="v._id" :label="v.text" >
                <el-table
                        height="calc(100vh - 20px - 40px)"
                        :data="v.children || []"
                        style="width: 100%"
                        border
                        stripe
                >
                    <el-table-column label="工作流名称" prop="name"></el-table-column>
                    <el-table-column label="说明" prop="desc"></el-table-column>
                    <el-table-column label="修改时间" prop="lastModify"></el-table-column>
                    <el-table-column>
                        <template slot-scope="scope">
                            <div class="action">
                                <el-button class="btn" type="text" @click="cp(scope.row.id)">复制</el-button>
                                <el-button class="btn" type="text" @click="modify(scope.row.id)">修改</el-button>
                                <el-popconfirm
                                        class="btn"
                                        title="确认删除？"
                                        @onConfirm="rm(scope.row.id)"
                                >
                                    <el-button slot="reference" type="text" >删除</el-button>
                                </el-popconfirm>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>

        <FormExport ref="exp"/>
    </div>
</template>
<script>
    import {goUrl} from "../libs/go";
    import {listen, unListen} from "../libs/event";
    import FormExport from "./FormExport";
    export default {
        components: {FormExport},
        data(){
            return {
                current: "",
                cats: [],
                bpms: [],
                loading: [],
                url: window.Env.ApiUrl
            }
        },
        mounted() {
            this.load();
            listen("form-saved", _ => {
                this.load(false);
            });
            window.VSelf = this;
        },
        destroyed(){
            window.VSelf = null;
            unListen();
        },
        methods:{
            getHeaders(){
                return{
                    "bpm-token": localStorage.getItem("bpm-token")
                }
            },
            load(init = true){
                $.get("/form/listex2", json => {
                    this.cats = json.data||[];
                    if(init){
                        this.cats.length && this.current == 0 && (this.current = this.cats[0]._id)
                    }
                });
            },

            /**
             * 复制流程
             */
            cp(id){
                $.get("/form/copy", {id:id}, json => {
                    this.load();
                    this.$notify.success({
                        message:"复制成功"
                    })
                });
            },
            /**
             * 删除流程
             * @param id
             */
            rm(id){
                $.get("/form/delete", {id: id}).then(json => {
                    this.load();
                });
            },
            modify(id){
                goUrl(id, "修改表单", `bpm/form/form.add.html?id=${id}`)
            },

            addCat(){
                $.get("/cat/add?pid=top&type=0", json => {
                    this.load()
                });
                // this.$prompt('请输入分类名', '提示', {
                //     confirmButtonText: '确定',
                //     cancelButtonText: '取消',
                //     inputPattern: /\S+/,
                //     inputErrorMessage: '分类名不能为空'
                // }).then(({value}) => {
                //     alert(value)
                // })
            },

            renameCat(){
                var i = this.cats.findIndex(e => e._id == this.current);
                if(i == -1){
                    return
                }
                this.$prompt('请输入分类名', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /\S+/,
                    inputErrorMessage: '分类名不能为空'
                }).then(({value}) => {
                    $.get("/cat/rename", {id: this.cats[i]._id, name: value}).then(json => {
                        this.load(false)
                    });
                })
            },
            rmCat(){
                var i = this.cats.findIndex(e => e._id == this.current);
                if(i == -1){
                    return
                }
                $.get("/cat/delete", {id: this.cats[i]._id}).then(res => {
                    this.load();
                });
            },
            /**
             * 导出
             */
            exp(){
                this.$refs.exp.open();
                // window.open("bpm/com/export.html?type=form", "form-export", "left=100, top=100, width=500, height=400, location=no")
            },
            /**
             * 新建表单
             */
            addBpm(){
                var i = this.cats.findIndex(e => e._id == this.current);
                if(i == -1){
                    return
                }
                goUrl("bpm-form-add", "新增表单", "bpm/form/form.add.html?pid=" + this.cats[i].id)
            },
            beforeImt(){
                this.$notify.info({
                    message:"开始导入，请稍后"
                })
            },
            /**
             * 导入
             */
            imt(msg){
                if(msg.success){
                    this.$notify.success(({
                        message: "共导入分类" + msg.data.cat + "条，表单" + msg.data.form + "条"
                    }))
                } else {
                    this.$notify.error({
                        message:"导入失败，请检查导入文件是否正确"
                    });
                }
                this.load();
                console.log(res);
            }
        }
    }
</script>
<style scoped>
    .p10{
        box-sizing: border-box;
        padding: 10px;
    }
    .box{
        /*width: 100vw;*/
        height: 100vh;
        box-sizing: border-box;
        padding: 10px;
    }
    .action > .btn{
        margin-left: 0;
        margin-right: 10px;
    }
</style>